<!--
 * @Author: licongwei
 * @Date: 2022-03-07 17:23:30
 * @FileDescription: 服务价格
-->
<template>
  <div class="P3">
    <div class="p3-le">
      <left-top
        class="le-top"
        :tableClickItem="tableClickItem"
        @tableClick="handTableClick"
      ></left-top>
      <left-btm
        class="le-btm"
        :tableClickItem="tableClickItem"
        :serviceData="serviceData"
        @keyColse="handKeyColse"
      ></left-btm>
    </div>
    <right-map class="p3-ri" :serviceData="serviceData"></right-map>
  </div>
</template>
<script lang="ts">
import leftTop from './cpns/leftTop.vue'
import leftBtm from './cpns/leftBtm.vue'
import rightMap from './cpns/map.vue'
import { defineComponent, ref } from 'vue'
interface ITableData {
  goodsName: string
  serviceCode: string
  taskCode: string
  serviceNum: number
}
export default defineComponent({
  name: 'P3',
  components: { leftTop, leftBtm, rightMap },
  setup() {
    const tableClickItem = ref([] as ITableData[])
    const serviceData = ref({})
    const serviceSaveData = ref({})
    const handTableClick = (row: any) => {
      if (row.listData) {
        // 点击类别
        if (row.listData.length > 0) {
          serviceData.value = row.listData[row.listData.length - 1]
        }
        tableClickItem.value = row.listData
        return
      }
      if (row.show) {
        //第一次进来
        serviceData.value = row
        serviceSaveData.value = row
        return false
      }
      const rowIds = tableClickItem.value.findIndex(
        (item: any) => item.serviceCode === row.serviceCode
      )
      if (rowIds === -1) {
        serviceData.value = row
        tableClickItem.value.push({
          goodsName: row.goodsName,
          serviceCode: row.serviceCode,
          taskCode: row.taskCode,
          serviceNum: row.serviceNum
        })
      }
      //  else {
      //   tableClickItem.value.splice(rowIds, 1)
      // }
    }
    const handKeyColse = (key: string) => {
      const keyList = key.split(',')
      keyList.forEach((keyItem: string) => {
        const keyId = tableClickItem.value.findIndex(
          (i: any) => i.serviceCode === keyItem
        )
        if (keyId > -1) {
          tableClickItem.value.splice(keyId, 1)
        }
      })
      // 点击清空按钮，默认显示第一条
      if (tableClickItem.value.length <= 0) {
        serviceData.value = serviceSaveData.value
      }
    }
    return {
      handTableClick,
      handKeyColse,
      tableClickItem,
      serviceData
    }
  }
})
</script>
<style lang="less" scoped>
.P3 {
  display: flex;
  // width: 100%;
  // height: 100%;
  .p3-ri {
    width: 850px;
  }
  .p3-le {
    // flex: 1;
    width: calc(100% - 850px);
    display: flex;
    flex-direction: column;
    .le-top {
      // height: calc(65% - 7px);
      height: calc(59% - 7px);
      margin-bottom: 7px;
    }
    .le-btm {
      height: calc(41% - 7px);
      margin-top: 7px;
    }
  }
  // font-size: 34px;
  // color: #ef7809;
  // text-align: center;
  // font-family: 'AliHYAiHei';
}
</style>
